const path = require('path')
// 压缩减小包体积
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 测量各个插件和loader所花费的时间 https://blog.csdn.net/weixin_41779718/article/details/110038340 vue-cli版本不一样写法不一样
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')

const smp = new SpeedMeasurePlugin()
// 增加环境变量
process.env.VUE_APP_VERSION = require('./package.json').version
process.env.VUE_APP_PROJECT_NAME = require('./package.json').name
module.exports = {
  publicPath: '/', // 基本路径
  outputDir: 'dist', // 输出文件目录
  lintOnSave: true, // lint 错误输出为编译警告,警告仅仅会被输出到命令行，且不会使得编译失败
  // 不输出 map 文件
  productionSourceMap: false,
  // webpack配置
  configureWebpack: smp.wrap({
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false
      })
    ]
  }),
  chainWebpack: config => {
    config.optimization.runtimeChunk({
      name: 'manifest'
    })
    config.optimization.splitChunks({
      // chunks: 'async',
      // minSize: 30000, // 最小块大小，如果超过则分包，该值为压缩前的，先分包，再压缩
      // minChunks: 1, // 最小引用次数
      // maxAsyncRequests: 5, // 按需加载时最大的并行请求数
      // maxInitialRequests: 3, // 一个入口最大的并行请求数
      // automaticNameDelimiter: '~', // 打包后入口文件名之间的连接符
      // name: true,
      /**
       * chunks: 表示从哪些chunks里抽取代码，有三个值：
       * 1. initial：初始块，分开打包异步\非异步模块
        2. async：按需加载块, 类似initial，但是不会把同步引入的模块提取到vendors中
        3. all：全部块，无视异步\非异步，如果有异步，统一为异步，也就是提取成一个块，而不是放到入口文件打包内容中
       */
      cacheGroups: { // 缓存组，我把所有的东西分为了6个包
        lib: {
          test: /[\\/]node_modules[\\/]/,
          name: 'chunk-vendor', // 拆分出来块的名字
          chunks: 'initial',
          priority: 1, // 执行优先级，默认为0
          minChunks: 1,
          reuseExistingChunk: true // 如果当前代码块包含的模块已经存在，那么不在生成重复的块
        },
        echarts: {
          test: /[\\/]node_modules[\\/]echarts[\\/]/,
          name: 'chunk-echarts',
          chunks: 'initial',
          priority: 3,
          minChunks: 1
        },
        index: {
          test: /[\\/]node_modules[\\/](sortablejs|screenfull|nprogress|hotkeys-js|fuse\.js|better-scroll|lowdb|shortid)[\\/]/,
          name: 'chunk-index',
          chunks: 'all',
          minChunks: 1,
          priority: 3,
          reuseExistingChunk: true
        },
        common: {
          name: 'chunk-common',
          chunks: 'initial',
          priority: 2,
          minChunks: 2,
          maxAsyncRequests: 5,
          reuseExistingChunk: true
        },
        vue: {
          test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,
          name: 'chunk-vue',
          chunks: 'all',
          priority: 3,
          reuseExistingChunk: true
        },
        element: {
          test: /[\\/]node_modules[\\/]element-ui[\\/]/,
          name: 'chunk-element',
          chunks: 'all',
          priority: 3,
          reuseExistingChunk: true
        }
      }
    })
    if (process.env.NODE_NPM_CONFIG_REPORT) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
  },
  // 传递任何第三方插件选项
  pluginOptions: {
    // style-resources-loader(https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader)
    // 导入一些公共的样式文件，比如：variables / mixins / functions，避免在每个样式文件中手动的@import导入
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, './src/assets/style/_mixins.scss'),
        path.resolve(__dirname, './src/assets/style/_variables.scss')
      ]
    }
  }
}
